<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<meta name="description" content="在这里与好友分享美食，分享生活" /> 
	<title>首页 - 菜帮子</title>
	<link rel="stylesheet" type="text/css" href="./css/reset.css">
	<style>
	<!--
		body{
			background:#eeecdd;
		}
		#container{
			background:#eeecdd;
		}
		#top_c{
			background:#48372a;
			height:180px;
		}
		#top{
			width:950px;
			color:#6db341;
			padding:50px auto 0 auto;
			margin:0 auto;
		}
		#top h1{
			margin:0;
			font-size:200%;
		}
		#top_left{
			float:left;
			width:110px;
			padding:60px 0 0 200px;
		}
		#top_right{
			float:left;
			padding:60px 0 0 50px;	
		}
		#search_input{
			border:solid 1px #6db341;
			height:35px;
			width:350px;
			background:#f0eede;
			font-size:14px;
			color:#48372a;
			padding:0 5px 0 5px;
		}
		#search_submit{
			border:solid 1px #6db341;
			height:35px;
			width:60px;
			font-size:16px;
			font-weight:bold;
			color:#f0eede;
			padding:2px;
			background:#6db341;		
		}
		#nav{
			clear:both;
			width:500zpx;
			margin:0px 0 0px 575px;
			padding:60px 0 0px 0;
		}
		#nav ul li{
			float:left;
			list-style-type:none;
			font-size:15px;
			padding:0 4px 0 4px;
			
		}
		#nav ul li a{
			color:#6db341;
			text-decoration:none;
			padding:2px 4px 0 4px;
		}
		#nav ul li a:hover{
			border-top:2px solid #6db341;			
		}
		#main{
			width:950px;
			align:center;
			margin:0 auto;
			background:#eeecdd;
		}
		#main_left{
			float:left;
			background:#f8f8f0;
		}
		#main_pic{
			float:left;
			width:400px;
		}
		#main_content{
			float:left;
			width:280px;
			text-align:left;
		}
		/*menu name*/
		#main_content h2{ 
			font-size:190%;
			color:#48372a;
			margin:10px auto 5px auto;
			padding:0 0 0 10px;
		}
		#rank{
			padding:0 0 0 10px;
		}
		#grade{
			color:#a68679;
			font-size:12px;
		}
		#fav{
			clear:right;
			padding:5px 0 0 10px;
		}
		#fav_num{
			padding:5px 0 0 10px;
			float:left;
			color:#a68679;
			font-size:12px;
		}
		#author{
			padding:5px 10px 0 0;
			float:right;
			color:#a68679;
			font-size:12px;
		}
		#weibo{
			font-size:14px;
			text-align:left;
			clear:right;
			background:#f0eedf;
			width:240px;
			height:100px;
		}
		
		
		。box{
			clear:both;
		}
		.green_bar{
			height:6px;
			background:#6db341;
			overflow:hidden;
			width:280px;
		}
		/*right start*/
		#main_right{
			float:right;
			background:#f8f8f0;
		}
	
	-->
	</style>
</head>
<body>
	<div id="container">
		<!--top start-->
		<div id="top_c">
		<div id="top">
			<div id="top_left">
			<h1>菜帮子</h1>
			</div>
			<div id="top_right">
				<form action="search.php" method="get">
				<input type="text" id="search_input" size="200" /> <input type="submit" id="search_submit" value="搜索" />
				</form>
			</div>
		</div>
			<!--navigation start-->
			<div id="nav">
				<ul>
					<li><a href="">主页</a></li>
					<li><a href="">菜谱</a></li>
					<li><a href="">群组</a></li>
					<li><a href="">小站</a></li>
					<li><a href="">讨论区</a></li>				
				</ul>
			</div>
			<!--navigation end-->
		</div>
		<!--top end-->
	
		<!---main start-->
		<div id="main">
			<!--main left start-->
			<div id="main_left">
				<!--main top content start-->
				<div id="main_pic">
					<img src="./images/pic.png" width="400" height="500" alt="豆角焖面" 	/>
				</div>
				<div id="main_content">
					<div class="green_bar"></div>
					<h2>豆角焖面</h2>
					<!--rank start-->
					<div id="rank">
						<div id="star"></div>
						<did id="grade">评分：8.3</div>
					</div>
					<!--rank end-->
					<!--fav start-->
					<div id="fav">
						<div id="fav_num">0人做过 100人收藏</div>
						<div id="author">天天美食</div>
					</div>
					<!--fav end-->
					<div id="weibo">test test whosfsf s s s s s
						 test</div>
				</div>
				<!--main top content end-->
			</div>
			<!--main left end-->
			<!--main right start-->
			<div id="main_right">
			</div>
			<!--main right end-->
		</div>
		<!--main end-->
		<div id="footer">
		</div>
	</div>
</body>
</html>